<template>
  <div id="aside">
    <aside-menu/>
    <aside-bottom/>
  </div>
</template>

<script>
import AsideMenu from './childrenCpns/AsideMenu.vue'
import AsideBottom from './childrenCpns/AsideBottom.vue'

export default {
  name: 'Aside',
  components: {
    AsideMenu,
    AsideBottom
  }
}
</script>

<style scoped lang="less">
#aside {
  display: flex;
  background-color: #f5f5f7;
  height: calc(100% - 53px);
  // width: 220px;
  width: var(--aside--width);
  border-right: 1px solid #e1e1e2;
  position: relative;
}
</style>
